<template>
	<view>
		<view class="boxwidth u-flex u-flex-between">
			<view class="m-bg-w bordera" :class="index ==0? 'u-m-l-0' : ''" v-for="(item,index) in list" :key='index' @click="nextNav('/pages/room/details?id='+item.id)">
				<view>
					<image style="width: 44vw; height: 44vw;border-radius: 10rpx 10rpx 0 0;" :src="item.image"></image>
				</view>
				<view class="u-m-t-30 u-p-b-30 u-m-l-15 u-m-r-15">
					<view class="u-font-36 m-font-b">
						{{item.name}}
					</view>
					<!-- m-font-b m-c-g u-font-28 -->
					<view class="u-m-t-20 u-flex u-font-22">
						<view>售价{{ get_look_two(item.aveprice) }}元/m²</view>
						<!-- <text class="m-pf">2</text> -->
						<view>-{{ get_look_two(item.avepricemax) }}元/m²</view>
						<!-- <text class="m-pf">2</text> -->
					</view>
					<view class="u-flex" v-if="item.characteristic.length > 0">
						<view class="u-m-t-20" :class="ind>0 ? 'u-m-l-20' : ''" v-for="(it,ind) in item.characteristic" :key='ind'>
							<text class="boxminwid">
								{{it.name}}
							</text>
						</view>
					</view>
					<view class="u-m-t-20 chu">
						{{item.commissiontext}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "browselist",
		props: {
			list: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	.boxwidth {
		width: 100%;
		overflow-x: auto;
	}

	.bordera {
		width: 44vw;
		margin-left: 4vw;
		border-radius: 10rpx;
	}

	.chu {
		color: #daaf7f;
	}

	.boxminwid {
		min-width: 80rpx;
		padding: 0 10rpx;
		border-radius: 5rpx;
		height: 40rpx;
		line-height: 38rpx;
		text-align: center;
		border: 1rpx solid #bfbfbf;
		color: #6b6b6b;
	}
</style>
